<template>
    <div class="chat_receiver_container">
        <div class="chat_receiver_item" v-html="renderedContent"></div>
        <span class="chat_receiver_name">:Robot</span>
    </div>
</template>

<script setup>
    import { marked } from 'marked'
    import { onMounted, ref } from 'vue'

    const props = defineProps(['itemInfo'])
    const emit = defineEmits(['notifyReceiver'])

    let renderedContent = ref('')

    onMounted(()=>{
        renderCharByChar(0)
    })

    // 逐字渲染函数
    const renderCharByChar = (currentIndex) => {
        if (currentIndex < props.itemInfo.content.length) {
            const subContent = props.itemInfo.content.substring(0, currentIndex + 1)
            renderedContent.value = marked(subContent)
            currentIndex++;
            emit('notifyReceiver')
            setTimeout(renderCharByChar, 50, currentIndex); // 每 50ms 渲染一个字符
        }
    };
    
</script>

<style scoped>
    .chat_receiver_container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .chat_receiver_container .chat_receiver_item {
        max-width: 80%;
        padding: 8px;
        color: black;
        border-radius: 5px;
        border-color: gray;
        border-width: 2px;
        border-style: solid;
        font-size: 20px;
    }
    .chat_receiver_container .chat_receiver_name {
        margin-left: 5px;
        font-size: 20px;
    }
</style>